<template>
  <div id="app">
  
    <xiangqing @doAdd="doAdd"></xiangqing>
    <chaxun @search="doSearch"></chaxun>
    <list :prodList="searchProdList" @del="doDel"></list>
  </div>
</template>

<script>
import xiangqing from './components/xiangqing.vue';
import chaxun from './components/chaxun.vue';
import list from './components/list.vue';
export default {
  name: 'app',
  data:function(){
    return {
      prodList:[{id:0,name:'iphone',price:123}],
      searchKey:''
    }
  },
  methods:{
doSearch:function(val){
this.searchKey=val;
},
doAdd:function(val){
this.prodList.push(val);
           
},
doDel:function(val){

    this.prodList= this.prodList.filter(function(item){
              
                return item.id!=val;
            })
}
  },
    computed:{//就算属性
        searchProdList:function(){
            var self=this;
            return this.prodList.filter(function(item){
                return item.name.indexOf(self.searchKey)!=-1;
            })
        }
    },
  components: {
    xiangqing,
    chaxun,
    list
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
